<template>
  <div class="case">
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card shadow="never">
          <Catree ref="Ctree" />
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card shadow="never" class="caseTop">
          <el-row class="search" :gutter="10">
            <el-col :span="10">
              <el-input v-model="inputstr" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2" class="search">
              <el-button
                type="primary"
                plain
                style="width: 100%"
                icon="el-icon-search"
                @click="onSearch"
                >搜索
              </el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="2">
              <el-button type="primary" style="width: 100%" @click="caseAdd"
                >新增用例</el-button
              >
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 100%" @click="inputDlg"
                >导入用例</el-button
              >
            </el-col>
            <el-col :span="10">
              <el-select v-model="venid" placeholder="请选择">
                <el-option
                  v-for="item in envlsit"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="caseCard">
          <el-table :data="casedata" style="width: 100%" stripe border>
            <el-table-column :show-overflow-tooltip="true"
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column :show-overflow-tooltip="true"
              prop="id"
              label="用例编号"
              width="80"
            ></el-table-column>
            <el-table-column :show-overflow-tooltip="true"
              prop="name"
              label="用例名称"
              width="230"
            ></el-table-column>
            <el-table-column :show-overflow-tooltip="true"
              prop="apimethod"
              label="请求类型"
              width="80"
            ></el-table-column>
            <el-table-column :show-overflow-tooltip="true"
              prop="api"
              label="接口路径"
              width="350"
            ></el-table-column>
            <el-table-column prop label="创建时间" width="193" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  myDate(scope.row.create_time)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_user"
              label="创建者"
              width=""
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="230">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="详情"
                  placement="top-start"
                >
                  <el-button
                    type="success"
                    icon="el-icon-document"
                    circle
                    size="mini"
                    @click="clickView(scope.row.id)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top-start"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    size="mini"
                    @click="clickUpdata(scope.row.id)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="执行"
                  placement="top-start"
                >
                  <el-button
                    type="warning"
                    icon="el-icon-caret-right"
                    circle
                    size="mini"
                    @click="clickTest(scope.row.id)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="测试结果"
                  placement="top-start"
                >
                  <el-button
                    type="success"
                    icon="el-icon-s-operation"
                    circle
                    size="mini"
                    @click="viewReports(scope.row.id)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top-start"
                >
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="mini"
                    @click="clickDel(scope.row.id)"
                  >
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <CaseReports ref="caseReps" />
    <UpdateCaseDialog ref="updataCase" />
  </div>
</template>

<script>
import Catree from "@/views/manage/common/Catree";
import { getCase, caseExcute, getCenv } from "@/network/networks";
import { myDate } from "@/assets/js/common";
import UpdateCaseDialog from "./caseChildrem/UpdateCaseDialog";
import CaseReports from "./caseChildrem/CaseReports";
export default {
  components: {
    Catree,
    UpdateCaseDialog,
    CaseReports,
  },

  mounted() {
    this.getEnvlist();
  },

  data() {
    return {
      envlsit: [],
      venid: null,
      //搜索条件
      inputstr: "",
      casedata: [],
      node: {
        nodeid: 0,
        level: 0,
      },
      cat_type: 1, //用来控制树展示
      
      //page分页
      currentPage:1,
      totalCount:0,
      pageSize:10,
      
    };
  },

  methods: {
    //设置节点id
    setNodeid(data) {
      this.node.nodeid = data["id"];
      this.node.level = data["level"];
      this.currentPage = 1;
      this.getCase();
    },

    getEnvlist() {
      getCenv()
        .then((res) => {
          if (res.code == 1) {
            this.envlsit = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    //获取用例
    getCase() {
      var redata = {}
      redata.nodeid = this.node.nodeid
      redata.level = this.node.level
      redata.currentPage = this.currentPage
      redata.pageSize = this.pageSize
      redata.inputstr = this.inputstr
      getCase(redata).then((res) => {
        this.casedata = res.data.cases;
        this.totalCount = res.data.totalCount;
      });
    },

    getCattype() {
      return this.cat_type;
    },

    onSearch() {
      this.currentPage=1
      this.getCase()
    },

    caseAdd() {
      if (this.node.level != 3) {
        this.$message({
          message: "请选择三级节点",
          type: "warning",
        });
        return;
      }
      this.$router.push({
        path: "/caseadd",
        name: "CD",
        params: {
          nodeid: this.node.nodeid,
          iscopy: 0,
        },
      });
    },

    inputDlg() {
      this.$router.push({
        psth: "/caseInput",
        name: "CI",
      });
    },

    clickView(id) {
      this.$refs.updataCase.able = true;
      this.$refs.updataCase.showDialog = true;
      this.$refs.updataCase.rowid = id;
    },

    clickUpdata(id) {
      this.$refs.updataCase.able = false;
      this.$refs.updataCase.showDialog = true;
      this.$refs.updataCase.rowid = id;
    },

    clickTest(id) {
      if (this.venid == null) {
        this.$message.warning("请选择测试环境");
        return;
      }
      var row = {};
      row["caseid"] = id;
      row["envid"] = this.venid;

      caseExcute(row)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    clickDel(id) {
      this.$message.success("实现中，请稍等！");
    },

    viewReports(id) {
      this.$refs.caseReps.showDialog = true;
      this.$refs.caseReps.rowid = id;
    },

    //格式化时间
    myDate(time) {
      return myDate(time);
    },

      //设置每页多少条
     handleSizeChange(val) {
        this.pageSize=val
        this.currentPage=1
        this.getCase()
      },

      //切换页数据
      handleCurrentChange(val) {
        this.currentPage=val
        this.getCase()
      }



  },
};
</script>

<style lang="less" scoped>
.search {
  bottom: 10px;
}

.caseCard {
  margin-top: 15px;
}
</style>